<%- include("./header.html") %>
<%- include("./side.html") %>
<!-- 样式 -->
<link rel="stylesheet" href="/css/page-detail.css">
<div class="container ajax mb150" id="pagesDetail" v-cloak>
   <div class="common-title">
        <h1 class="common-nav"><a href="/home/">首页</a>/<a href="/pages/">列表</a>/<a href="/pages/detail/">页面性能</a>/Item页面性能</h1>
        <commonsearch ></commonsearch>
    </div>
    <!-- 页面平均耗时说明 -->
    <div class="common-margin">
        <div class="common-block fl">
            <h1 class="h1">页面性能耗时</h1>
            <li>
                <h1>加载耗时(s)</h1>
                <h2 class="red">{{pagesItemData.loadTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>白屏耗时(ms)</h1>
                <h2 class="red">{{pagesItemData.whiteTime|toFixed}}</h2>
            </li>
            <li>
                <h1>资源加载耗时(s)</h1>
                <h2 class="red">{{pagesItemData.resourceTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>DOM构建耗时(s)</h1>
                <h2>{{pagesItemData.domTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>解析DOM耗时(s)</h1>
                <h2>{{pagesItemData.analysisDomTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>调用次数</h1>
                <h2>{{pagesItemData.count||0}}</h2>
            </li>
            <li>
                <h1>request请求耗时(ms)</h1>
                <h2>{{pagesItemData.requestTime|toFixed}}</h2>
            </li>
            <li>
                <h1>页面准备耗时(ms)</h1>
                <h2>{{pagesItemData.readyTime|toFixed}}</h2>
            </li>
        </div>
        <div class="common-block fr">
            <h1 class="h1">页面访问者信息</h1>
            <li>
                <h1>浏览器类型</h1>
                <h2>{{environment.browser}}</h2>
            </li>
            <li>
                <h1>浏览器版本号</h1>
                <h2>{{environment.borwserVersion}}</h2>
            </li>
            <li>
                <h1>用户操作系统</h1>
                <h2>{{environment.system}}</h2>
            </li>
            <li>
                <h1>操作系统版本</h1>
                <h2>{{environment.systemVersion}}</h2>
            </li>
            <li>
                <h1>来访者IP</h1>
                <h2>{{environment.IP}}</h2>
            </li>
            <li>
                <h1>来访城市</h1>
                <h2>{{environment.city}}</h2>
            </li>
            <li>
                <h1>所属运营商</h1>
                <h2>{{environment.isp}}</h2>
            </li>
            <li>
                <h1>访问时间</h1>
                <h2>{{environment.createTime|date('/',true)}}</h2>
            </li>
        </div>
    </div>
    <!-- 资源请求列表 -->
    <div class="sources-list">
        <h1 class="h1">页面资源请求详情信息</h1>
        <li v-for="item in sourceslist">
            <span class="bili" 
                :class="[{'color1':item.type==='css','color2':item.type==='img','color3':item.type==='xmlhttprequest','color4':item.type==='script'}]" 
                :style="{'width':item.proportion+'%'}"></span>
            <div class="s1">
                <span class="name" :title="item.name">{{item.name}}</span>
                <span class="type" :title="item.type">{{item.type}}</span>
                <span class="type red">{{item.duration|toFixed(true)}}</span>
                <span class="type">{{item.decodedBodySize|toSize}}</span>
            </div>
        </li>
    </div>   
    
</div>
<script src="/js/view-page-detail-item.js"></script>
